import React, { useEffect, useState } from 'react';
import { Button, MessageBox, Message } from 'element-react';
import picture from './img/picture.jpg';
import { getBasicInfoData, getDetailGridData } from '../actions';
import { Table } from 'antd';
import './index.less';
const img = {
    picture
};
function AuditDetail() {
    const [ basicInfoData, setBasicInfoData ] = useState([]);

    const updateBasicInfoData = async () => {
        const res = await getBasicInfoData();
        setBasicInfoData(res);
    }
    useEffect(() => {
        updateBasicInfoData();
    }, []);

    const [gridData, setGridData] = useState([]);

    const updateDetailGridData = async () => {
        const res = await getDetailGridData();
        setGridData(res);
    }

    useEffect(() => {
        updateDetailGridData();
    }, []);

    const auditHandle = (id, title, successTip, callback) => {
        MessageBox.msgbox({
            title: title,
            message: `params: { id: ${id} }`,
            showCancelButton: true
        }).then((action) => {
            if (action === 'cancel') {
                return;
            }
            Message({
                type: 'info',
                message: successTip
            });
            callback?.();
        })
    }

    const [selectedRowDatas, setSelectedRowDatas] = useState([]);
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);

    // 基础信息区
    const BasicInfoArea = () => {
        return (
            <div className="basic-info-wrapper">
                {basicInfoData.map((v, i) => {
                    return (
                        <>
                            <span className="basic-info-item">{v.title}</span>
                            {v.link ? <a className="basic-info-item">{v.value}</a> :
                                <span className="basic-info-item">{v.value}</span>
                            }
                        </>
                    )
                })}
            </div>
        );
    }

    // 操作按钮区
    const BtnArea = () => {
        const btns = [{
            text: '通过所选',
            value: 'pass'
        }, {
            text: '拒绝所选',
            value: 'refuseChoose'
        }, {
            text: '拒绝账户',
            value: 'refuseUser'
        }, {
            text: '搁置',
            value: 'shelve'
        }, {
            text: '下一个任务',
            value: 'next'
        }];

        const operateHandle = (type) => {
            let id = selectedRowDatas.map(v => v.id);
            let title = '提交所选数据';
            let successTip = '提交成功';
            let callback;
            if (type === 'refuseUser') {
                id = '9865636985';
                title = '拒绝账户';
                successTip = '拒绝账户成功';
            } else if (type === 'shelve') {
                title = '搁置';
                successTip = '搁置成功';
                callback = () => {
                    setTimeout(() => {
                        setSelectedRowKeys([]);
                        updateDetailGridData();
                    }, 1000);
                };
            } else if (type === 'next') {
                setSelectedRowKeys([]);
                updateDetailGridData();
                updateBasicInfoData();
                return;
            }

            if (Array.isArray(id) && id.length === 0) {
                Message({
                    message: '警告哦，你还没选数据呢',
                    type: 'warning'
                });

                return;
            }

            auditHandle(id, title, successTip, callback);
        }

        return (
            <div className="btn-area-wrapper">
                {btns.map(v => {
                    return (
                        <Button
                            type="primary"
                            onClick={operateHandle.bind(null, v.value)}>
                            {v.text}
                        </Button>
                    );
                })}
            </div>
        );
    }

    // 审核数据区
    const AuditDataArea = () => {
        const columns = [{
            title: "标题",
            dataIndex: "title",
            width: 200,
            onCell: sharedOnCell
        }, {
            title: "描述",
            dataIndex: "des",
            width: 200,
            onCell: sharedOnCell
        }, {
            title: "图片",
            dataIndex: "picture",
            width: 300,
            render: (v, data) => {
                return (
                    <>
                        <img className="picture picture-left" src={img[data.picture]} />
                        <img className="picture picture-right" src={img[data.picture]} />
                    </>
                );
            },
            onCell: sharedOnCell
        }, {
            title: "操作",
            dataIndex: "options",
            width: 200,
            render: (v, data) => {
                return <span>
                    <Button
                        type="text"
                        size="small"
                        onClick={auditPassHandle.bind(null, data)}>通过</Button>
                    <Button
                        type="text"
                        size="small"
                        onClick={refuseHandle.bind(null, data)}>拒绝</Button>
                </span>
            },
            onCell: sharedOnCell
        }, {
            title: "落地页",
            dataIndex: "resPage",
            colSpan: 2,
            onCell: (_, index) => {
                if (index === 0) {
                    return {
                        rowSpan: 10
                    };
                }
                if (index < 10) {
                    return {
                        rowSpan: 0
                    };
                }

                return {};
            },
            render: (v, data) => {
                return (
                    <div className="res-page-wrapper">
                        <a className="res-link">{data.resPage}</a>
                        <img className="picture picture-left" src={img[data.picture]} />
                    </div>
                );
            }
        }, {
            title: "操作",
            dataIndex: "op",
            colSpan: 0,
            onCell: (_, index) => {
                if (index === 0) {
                    return {
                        rowSpan: 10
                    };
                }
                if (index < 10) {
                    return {
                        rowSpan: 0
                    };
                }

                return {};
            },
            render: (v, data) => {
                return (
                    <div>
                        <Button
                            type="text"
                            size="small"
                            onClick={auditPassHandle.bind(null, data)}>通过</Button>
                        <Button
                            type="text"
                            size="small"
                            onClick={refuseHandle.bind(null, data)}>拒绝</Button>
                    </div>
                );
            }
        }];

        const sharedOnCell = (_, index) => {
            if (index === 1) {
                return {
                    colSpan: 0
                };
            }
            return {};
        };

        const auditPassHandle = (data) => {
            const { id } = data;
            const title = '提交通过审核数据';
            const successTip = '通过审核成功';
            auditHandle(id, title, successTip);
        }

        const refuseHandle = (data) => {
            const { id } = data;
            const title = '提交拒绝审核数据';
            const successTip = '拒绝审核成功';
            auditHandle(id, title, successTip);
        }

        const onSelectChange = (keys, datas) => {
            setSelectedRowDatas(datas);
            setSelectedRowKeys(keys);
        };
        const rowSelection = {
            selectedRowKeys,
            onChange: onSelectChange,
        };

        return (
            <div className="audit-data-wrapper">
                {/* <Table
                    className="list-grid"
                    style={{ width: '100%' }}
                    columns={columns}
                    data={data}
                    border={true}
                    onSelectChange={(selection) => { console.log(selection) }}
                    onSelectAll={(selection) => { console.log(selection) }}
                /> */}
                <Table
                    columns={columns}
                    dataSource={gridData}
                    rowSelection={rowSelection}
                    pagination={{
                        position: ['none', 'none'],
                    }}
                    bordered />
            </div>
        );
    }

    return (
        <div className="audit-detail-wrapper">
            <BasicInfoArea />
            <BtnArea />
            <AuditDataArea />
        </div>
    )
}

export default AuditDetail;